<script setup lang="ts">
import {computed} from 'vue';
import {Button} from 'ant-design-vue';
import {BasicIcon} from '#/components/shadcn-ui';
import {useModal} from '#/ui-kit';
import {preferences} from '#/preferences';
import CropperModal from './cropper-modal.vue';

const emits = defineEmits(['update:value']);

const props = defineProps({
  value: {
    type: String,
    default: '',
  },
});

const [Modal, modalApi] = useModal({
  title: '头像上传',
  class: 'w-[800px] min-h-[490px]',
  connectedComponent: CropperModal,
});

const avatar = computed(() => {
  return props?.value ? props?.value : preferences.app.defaultAvatar;
});

const handleClick = () => {
  modalApi.setData({avatar: avatar.value})
  modalApi.open();
}

const handleUpdate = (val) => {
  emits('update:value', val);
}
</script>

<template>
  <div class="inline-block w-[150px]">
    <div class="relative overflow-hidden rounded-full bg-white cursor-pointer w-[150px] h-[150px]" @click="handleClick">
      <div
          class="absolute inset-0 transition-opacity duration-400 border-inherit rounded-inherit opacity-0 bg-black/60 cursor-pointer hover:opacity-70">
        <div class="flex items-center justify-center w-full h-full">
          <BasicIcon class="h-[75px] w-[75px] text-gray-100" icon="ant-design:cloud-upload-outlined"/>
        </div>
      </div>
      <img :src="avatar" v-if="avatar" alt="avatar" class="object-cover w-full h-full"/>
    </div>

    <div class="mt-3 w-[150px] text-center">
      <Button @click="handleClick">
        <template #icon>
          <BasicIcon icon="ant-design:cloud-upload-outlined"/>
        </template>
        更换头像
      </Button>
    </div>

    <Modal @update="handleUpdate"/>
  </div>
</template>

<style scoped lang="scss">
</style>